<template>
  <div class="main-container">
    <div class="container-left">
      <SlideBar></SlideBar>
    </div>
    <div class="container-right">
       <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            v-for="(item, index) in breadCrumb" :key="item.path" ><a v-if="index != breadCrumb.length - 1" :href="item.path">{{ item.title }}</a><span>{{ item.title }}</span></el-breadcrumb-item
          >
        </el-breadcrumb>
        <RouterView v-if="breadCrumb.length > 0"></RouterView>
        <div v-else class="home-page">学生信息管理系统，欢迎您!</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="AppMain">

interface BreadCrumbMode {
  title: string,
  path: string
}

import { reactive, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

  import SlideBar from '@/components/SlideBar/SlideBar.vue';

  const breadCrumb = reactive<BreadCrumbMode[]>([])
  
  const route = useRoute();
  const router = useRouter();

  onMounted(() => {
    breadCrumb.length = 0;
    const path: string = route.path;
    const title: string = route.meta.title as string;
    if(path !== '/') {
      breadCrumb.push({
        path,
        title
      })
    }
  })

  watch(() => router.currentRoute.value, (newVal) => {
    breadCrumb.length = 0;
    const path: string = newVal.path;
    const title: string = newVal.meta.title as string;
    if (path !== '/') {
      breadCrumb.push({
        path,
        title
      })
    }
  })
</script>

<style lang="scss" scoped>
.main-container {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .container-left {
    width: 220px;
    height: 100%;
    border-right: 1px solid #fff;
  }
  .container-right {
    width: calc(100% - 240px);
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    .home-page {
      width: 100%;
      height: 100%;
      font-size: 34px;
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>